<template>
	<view class="bank-card-page">
		<view class="card-type">
			<view class="explain-title">
				<view class=""></view>
				<view class="">
					选择绑卡类型
				</view>
			</view>	
			<view class="card-type-content">
				<view class="common-style-card" :class="type == item.value?'common-style-active':''" v-for="(item,index) in cardType" :key='index' @click="chooseType(item.value)">
				{{item.name}}
				</view>
			</view>
		</view>
		<!-- 企业商户账户 -->
		<view class="binding-need-data" v-if="type == 1">
			<view class="explain-title">
				<view class=""></view>
				<view class="">
					绑定企业商户账户需要准备资料
				</view>
			</view>
			<view class="business-img">
				<view class="business-img-title">
					<view class="business-img-title-num">
						<text>1</text>工商营业执照照片
					</view>
					<view class="business-img-title-tip">
						(支持民办粉企业单位登记证书)
					</view>
				</view>
				<view class="business-img-content">
					<image src="" :src="imglink + 'member/business-permit.png'" mode=""></image>
					<view class="">
						例
					</view>
				</view>
			</view>
			<view class="identity-card">
				<view class="business-img-title">
					<view class="business-img-title-num">
						<text>2</text>法人代表人身份证正反面照片
					</view>
				</view>
				<view class="identity-card-content">
					<image src="" :src="imglink + 'member/identity-card1.png'" mode=""></image>
					<image src="" :src="imglink + 'member/identity-card2.png'" mode=""></image>
					<view class="">
						例
					</view>
				</view>
			</view>
			<view class="business-img-title" style="margin-top: 30upx;">
				<view class="business-img-title-num">
					<text>3</text>企业对公账户
				</view>
			</view>
			<view class="sure-binding" @click="sureBinding('1')">
				确定绑定收款银行卡
			</view>
		</view>
		<!-- 自然人（个人）账户 -->
		<view class="binding-need-data" v-if="type == 0">
			<view class="explain-title">
				<view class=""></view>
				<view class="">
					绑定自然人（个人）账户
				</view>
			</view>
			<view class="person-account">
				<view class="business-img-title-num" style="margin-top: 36upx;">
					<text>1</text>常用银行卡一张
				</view>
				<view class="identity-card">
					<view class="business-img-title">
						<view class="business-img-title-num">
							<text>2</text>持卡人代表人身份证正反面照片
						</view>
					</view>
					<view class="identity-card-content">
						<image src="" :src="imglink + 'member/identity-card1.png'" mode=""></image>
						<image src="" :src="imglink + 'member/identity-card2.png'" mode=""></image>
						<view class="">
							例
						</view>
					</view>
				</view>	
			</view>
			<view class="sure-binding" @click="sureBinding('0')">
				确定绑定收款银行卡
			</view>
		</view>
		<view class="bank-card-tip">
			点击确定绑定即代表同意：
		</view>
		<!-- <view class="bank-card-content">
			<text>《好课宝技术服务协议》</text>
			<text style="display: inline-block;margin-left: 20upx;">《汇付天下服务协议》</text>
		</view> -->
		<view style="display: flex;flex-wrap: wrap;">
			<view class="bank-card-content" v-for="item in protocolList" :key='item.page_id' @click="protocolPage(item)">
				《{{item.title}}》
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return {
				imglink: this.$store.state.imgLink,
				cardType:[
					{name:'企业商户账户',value:1},
					{name:'自然人（个人）账户',value:0},
				],
				type: 0,// 绑卡类型 0:个人；1企业
				options:'',
				protocolList:[],
				store_id:'',
				valu:''
			}
		},
		onLoad(option) {
			// console.log(option)
			let store_id = parseInt(option.store_id,10);
			// console.log('进入了onload 获取url的store_id',store_id)
			if(!store_id > 0){
				store_id = isNaN(uni.getStorageSync('store_id'))?0:parseInt(uni.getStorageSync('store_id'),10)
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			
			this.store_id = store_id
			this.$store.commit('updateStoreId',store_id)
			this.options = option
			
			this.valu = parseInt(option.valu,10);
		},
		onShow() {
			this.getStoreIndentification()
			this.getprotocol()
		},
		methods:{
			getStoreIndentification(){
				
				const that = this
				
				let data = {
					token:that.$store.getters.getToken,
					store_id:that.store_id,
				}
				
				that.$api.get_store_identification(data).then(res => {
					
					console.log(res,'get_store_identification')
					if(res.status){
						if(!isNaN(res.data.type)){
							that.type = res.data.type
						}
					}
					
				});
			},
			protocolPage(item){
				uni.setStorageSync('protocolContent',item)
				uni.navigateTo({
					url:'../../shop/BankCardBinding/protocolPage?store_id=' + this.store_id
				})
			},
			getprotocol(){
				let data = {
					token:this.$store.getters.getToken,
					type:'banksetting'
				}
				this.$api.bingind_protocol(data).then(res => {
					console.log(res)
					if(res.status){
						this.protocolList = res.list.data
					}
				}).catch(err => {
					console.log(err)
				})
			},
			chooseType(type){
				this.type = type
			},
			sureBinding(type){
				
				uni.setStorageSync('type',type)
				uni.navigateTo({
					url:'sureBindingFirm?store_id=' + this.store_id + '&valu=' + this.valu
				})
			}
		}
	}
</script>

<style>
	page{
		background: #F3F3F4;
	}
	.bank-card-page{
		width: 100%;
		padding-bottom: 30upx;
		box-sizing: border-box;
	}
	.card-type{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
	}
	.explain-title{
		display: flex;
		width: 100%;
	}
	.explain-title>view:first-child{
		width: 8upx;
		height: 32upx;
		background: #FF8B46;
		margin-top: 10upx;
	}
	.explain-title>view:last-child{
		color: #333333;
		font-size: 30upx;
		line-height: 48upx;
		margin-left: 10upx;
	}
	.card-type-content{
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 40upx;
	}
	.common-style-card{
		width: 336upx;
		height: 88upx;
		line-height: 88upx;
		background: #F3F3F4;
		border-radius: 44upx;
		color: #999999;
		font-size: 32upx;
		text-align: center;
	}
	.common-style-active{
		background: #FF8B46;
		color: #FFFFFF;
	}
	.binding-need-data{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-top: 20upx;
	}
	.business-img,.identity-card{
		width: 100%;
		margin-top: 36upx;
	}
	.business-img-title{
		width: 100%;
		display: flex;
	}
	.business-img-title-num{
		color: #666666;
		font-size: 28upx;
	}
	.business-img-title-num>text{
		display: inline-block;
		width: 40upx;
		height: 38upx;
		line-height: 38upx;
		text-align: center;
		background: url(https://tool.tuanhaoke.cn/static/image/member/example-bg.png) no-repeat;
		background-size: 100% 100%;
		color: #FFFFFF;
		font-size: 24upx;
	}
	.business-img-title-tip{
		color: #FF391F;
		font-size: 24upx;
		margin-left: 10upx;
		margin-top: 6upx;
	}
	.business-img-content{
		width: 100%;
		height: 388upx;
		background: #F4F5F9;
		margin-top: 20upx;
		padding: 20upx 90upx;
		box-sizing: border-box;
		position: relative;
	}
	.business-img-content>image{
		width: 100%;
		height: 100%;
	}
	.business-img-content>view,.identity-card-content>view{
		position: absolute;
		top: 0;right: 0;
		width: 76upx;
		height: 76upx;
		text-align: right;
		color: #FFFFFF;
		font-size: 24upx;
		background: url(https://tool.tuanhaoke.cn/static/image/member/manage_background_case.png) no-repeat;
		background-size: 100% 100%;
		padding-right: 10upx;
		padding-top: 10upx;
		box-sizing: border-box;
	}
	.identity-card-content{
		width: 100%;
		height: 290upx;
		background: #F4F5F9;
		padding: 60upx 20upx 30upx;
		box-sizing: border-box;
		margin-top: 20upx;
		display: flex;
		justify-content: space-between;
		position: relative;
	}
	.identity-card-content>image{
		width: 48%;
		height: 100%;
	}
	.sure-binding{
		width: 600upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		margin: 0 auto;
		margin-top: 56upx;
		border-radius: 44upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
		color: #FFFFFF;
		font-size: 32upx;
	}
	.bank-card-tip{
		color: #999999;
		font-size: 24upx;
		margin-top: 20upx;
		padding-left: 30upx;
		box-sizing: border-box;
	}
	.bank-card-content{
		color: #FF8B46;
		font-size: 24upx;
		margin-top: 20upx;
		padding-left: 30upx;
		box-sizing: border-box;
	}
	.person-account{
		width: 100%;
	}
</style>
